<template>
  <!-- 底部 -->
  <footer class="footer">
    <ul>
      <li v-for="(item,i) in lists" :key="i" @click="change(i)">
        <router-link class="tab" :class="{'active' : selected === i}" :to="item.href">{{item.name}}</router-link>
      </li>
    </ul>
  </footer>
</template>

<script>
export default {
  data () {
    return {
      selected: 0,
      lists : [
        {name : "商品" , href : "/goods"},
        {name : "评论" , href : "/ratings"},
        {name : "商家" , href : "/seller"}
      ]
    }
  },
  created () {},
  methods : {
    change (index){
      this.selected = index
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  text-decoration: none;
}
.tab.active{
  font-size: 14px;
  color: skyblue;
  line-height: 14px;
}
.footer{
  width: 100%;
  height: 40px;
  /* position: fixed;
  bottom: 0; */
  font-size: 14px;
  color: rgb(77, 85, 93);
  line-height: 14px;
  border-bottom: 1px solid rgb(7,17,27,0.1);
}
.footer ul{
  height: 40px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
.footer ul li{
  font-size: 14px;
  flex:1;
  line-height: 40px;
}
</style>

